ignore: 404

1 files changed, 32 insertions, 13 deletions

diff --git a/cloud/app/src/routes/[...404].tsx b/cloud/app/src/routes/[...404].tsx
index 4ea71ec7f..ba2842b5a 100644
--- a/cloud/app/src/routes/[...404].tsx
+++ b/cloud/app/src/routes/[...404].tsx
@@ -1,19 +1,38 @@
-import { Title } from "@solidjs/meta";
-import { HttpStatusCode } from "@solidjs/start";
+import "./[...404].css"
+import { Title } from "@solidjs/meta"
+import { HttpStatusCode } from "@solidjs/start"
+import logoLight from "../asset/logo-ornate-light.svg"
+import logoDark from "../asset/logo-ornate-dark.svg"
 
 export default function NotFound() {
   return (
-    <main>
-      <Title>Not Found</Title>
+    <main data-page="not-found">
+      <Title>Not Found | opencode</Title>
       <HttpStatusCode code={404} />
-      <h1>Page Not Found</h1>
-      <p>
-        Visit{" "}
-        <a href="https://start.solidjs.com" target="_blank">
-          start.solidjs.com
-        </a>{" "}
-        to learn how to build SolidStart apps.
-      </p>
+      <div data-component="content">
+        <section data-component="top">
+          <a href="/" data-slot="logo-link">
+            <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
+            <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
+          </a>
+          <h1 data-slot="title">404 - Page Not Found</h1>
+        </section>
+
+        <section data-component="actions">
+          <div data-slot="action">
+            <a href="/">Home</a>
+          </div>
+          <div data-slot="action">
+            <a href="/docs">Docs</a>
+          </div>
+          <div data-slot="action">
+            <a href="https://github.com/sst/opencode">GitHub</a>
+          </div>
+          <div data-slot="action">
+            <a href="/discord">Discord</a>
+          </div>
+        </section>
+      </div>
     </main>
-  );
+  )
 }